<!doctype html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>jq实现二级才拉菜单动画效果</title>  
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>   
    <style>    
        a{color: white;text-decoration: none;}    
        nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;cursor: pointer;}    
        nav li a{display:block;}    
        nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}    
    </style>  
    <script>  
    $(function(){  
        $('.has_menu').hover(function(){  
        $(this).find('ul').slideDown("1500");  
    },function(){  
        $(this).find('ul').slideUp("fast");  
    });  
    })  
      
    </script>    
</head>    
<body>    
    <nav>    
        <li class="has_menu"><a href="">菜单一</a>    
            <ul>    
                <a href="">下拉菜单1</a>    
                <a href="">下拉菜单1</a>    
                <a href="">下拉菜单1</a>    
                <a href="">下拉菜单1</a>    
                <a href="">下拉菜单1</a>    
            </ul>    
        </li>    
        <li  class="has_menu"><a href="">菜单二</a>    
            <ul>    
                <a href="">下拉菜单2</a>    
                <a href="">下拉菜单2</a>    
                <a href="">下拉菜单2</a>    
                <a href="">下拉菜单2</a>    
                <a href="">下拉菜单2</a>    
            </ul>    
        </li>    
        <li><a href="">菜单三</a></li>    
        <li><a href="">菜单四</a></li>    
        <li><a href="">菜单五</a></li>    
    </nav>    
</body>    
</html>  
